/* ul li {
    list-style-type: none;
    display: inline;
    background-color: black;
    padding: 10px;

}
ul li > a {
    color: white;
    padding: 20px;
    margin: 10px;
} */
/* 全宽的背景色？？？ */
/* 
ul {
    background-color: black;
    list-style-type: none;
    margin: 0px;
    padding: 0px;

}
li {
    float: left;
}
li a {
    display: block;
    padding: 8px;
    text-align: center;
    background-color: black;
    text-decoration: none;
    color: white;
}
a.active {
    background-color: blue;
} */

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    background-color: black;
    /* 为何li元素用float:left之后，这里要用overflow :hidden;?? */
    overflow: hidden;

    position: fixed;
    top: 0;
    /* bottom: 0; */
    width: 100%;
}
li {
    float: left;
    border-right: 1px solid gray;
}
/* :last-child 最后一项，而不是最后一个孩子； */
li:last-child {
    border-right: none;
}
li a {
    display: block;
    /* float: left; */
    text-decoration: none;
    color: white;
    padding: 15px;
    opacity: 0.5;
}
li a:hover {
    color: antiquewhite;
    opacity: 1;
}
a.active {
    background-color: blue;
}

/* 下拉菜单 */
.dropdown {
    position: relative;
    display: inline-block;
}
.dropdown-content {
    min-width: 160px;
    overflow: auto;
    box-shadow: 0px 8px 15px 5px rgb(219, 215, 215);
    display: none;
    /* border: 1px solid black; */
}
.dropdown-content p {
    text-align: center;
}
.dropdown:hover .dropdown-content {
    display: block;
}

/* 下拉菜单 2*/
/* 容器div dropdown2 需要放置下拉内容 */
.dropdown2 {
    position: relative;
    display: inline-block;
}
/* 下拉内容，要隐藏起来 */
.dropdown-content2 {
    display: none;
    position: absolute; /*??*/
    background-color: rgb(192, 190, 190);
    min-width: 160px;
    /* 若下拉内容的宽度和下拉按钮的宽度一样，则min-width: 100%; */
    /* box-shadow: 0px 10px 5px 5px gainsboro; */
    /* z-index: 1; ?? */
}
/* 设置下拉链接 */
.dropdown-content2 a{
    color: black;
    background-color: rgb(204, 197, 197);
    padding: 5px;
    text-decoration: none;
    display: block;
}
/* 为何这个a:hover 不能显示出来？ */
dropdown-content2 a:hover {
    background-color: #958b8b;
    border: 10px solid red;
    /* display: block; */
}
.dropdown2:hover .dropdown-content2{
    display: block;
}
/* 设置按钮的样式 */
.dropbtn {   
    background-color: blue;
    color: aliceblue;
    padding: 12px;
    margin: 21px;
    border: 0px;
    /* 鼠标放到这个按钮上会有一个手； */
    cursor: pointer;
}
/* 把鼠标悬浮在上面让link1,2,3显示出来？ */
.dropdown2:hover .dropbtn {
    background-color: #3e8e41;
}
.dropdown-content2 {
    /* left: 0;  从左到右 里左边的是0 */
    right: 0; /*从右到左 离右边的是0**/
}

/* 1 - 下拉式图像 */
/* 这个下拉框的内容 */
.dropdown3 {
    /* 整个下拉框的位置是相对的，相对于哪里？ 
        display:inline-block; 为什么设置inline-block?
    */
    position: relative;
    display: inline-block;
}

/* 下拉框的内容 */
.dropdown-content3 {
    /* 先不让它显示： display:none;删除，不会占位置；但是visiability:hidden;会隐藏，然后占据位置；*/
    display: none;
    position: absolute;
    min-width: 160px;
    background-color: #f9f9f9;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    /*???z-index???*/
    z-index: 1;
}
.dropdown3:hover .dropdown-content3 {
    display: block;
}
.desc {
    padding: 15px;
    text-align: center;
}

div.gallery {
    border: 1px solid rgb(201, 197, 197);
    padding-bottom: 10px;
    margin: 10px;
    /* display: inline-block; */
    float: left;
    width: 180px;
}
div.gallery:hover {
    border: 1px solid black;
}
div.gallery img {
    width: 100%;
    height: auto;
}
div.desc {
    padding: 15px;
    text-align: center;
}
* {
    box-sizing: border-box;
}

img #home {
    width: 40px;
    height: 40px;
    background: url(../icon/婚纱摄影.png) 0 0;
}
img #next {
    width: 40px;
    height: 40px;
    background: url(../icon/房屋出租.png) -90px 0;
}
/* 
ul #navlist {
    position: relative;
}

ul #navlist li {
    margin: 0;
    padding: 0;
    list-style: none;
    position: absolute;
    top: 0;
} */

/* 
属性选择器：
[属性名]，[属性名=属性值]，[属性名^=属性值]，
^, $, *; 
属性名以abc开头，以abc结尾，abc在任意位置； */

/* 元素的class属性值可以有多个，每个用空格隔开。 */
/* 
交集选择器 .a.b.c {} div.p{}  中间没有符号
交集选择器如果有标签选择器则必须以交集选择器开头；
并集选择器 .a,span,p,div.p {}  以,分隔 */

/* 关系选择器：父子(div>p)，兄弟(div+p div~p(通用兄弟选择器，指定元素的所有同级元素))，祖先后代(div p) */

p[title] {
    color: #3e8e41;
}
p[title$=abc]{
    background-color: rgb(31, 114, 230);
}

/* 伪类选择器：:first-child{} */